<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
     <div id="app">
          <button @click="handler">修改第三个人的名字</button>
          <ul>
              <li v-for="(p,index) in list" :key="index">
                   {{p}}
              </li>
          </ul>
     </div>
</body>
</html>
<script>
      //初始化VM实例
      let VM = new Vue({
           el:'#app',
           data:{
               //响应式属性的属性值是数组    
               list:['张三','李四','王五','小明','小红','小李',"张飞"],
            
           },
           methods: {
               handler(){
                  //同学想到的写法:错误的写法
                  //确确实实能看到数组里面数据发生变化，但是Vue框架检测不到，没有办法更新数据。
                  //为什么检测不到，因为对于数组的操作，Vue框架有相应的方案进行检测
                  //数组变更、替换Vue框架才能检测到
                  //   this.list[2] = '孙悟空';
                  //第一种手段
                  //数组变更的方法，才能检测到数据变化，才能更新页面
                  //数组变更的方法一共是七个：pop|push|shift|unshift|reverse|splice|sort
                  //this.list.splice(2,1,"孙悟空")
                  //第二种手段：替换
                  // this.list = ['张三','李四','孙悟空','小明','小红','小李',"张飞"]
                 // this.list =  this.list.map(item=> item=='王五'?'孙悟空':item);
               }
           },
      })
</script>